<template>
  <div>
    <p>我是父组件</p>
    <hr />
    <child :data="name">
      <h2>我代替了默认插槽</h2>
      <!-- 具名插槽旧语法 -->
      <h3 slot="s1">我代替了具名插槽1</h3>
      <!-- 具名插槽新语法 -->
      <template #s2>
        <button>我代替了具名插槽2</button>
      </template>
      <!-- 作用域插槽 -->
      <template #s3="scope">
        <h5
          :style="{ color: scope.row === '永远的神' ? 'red' : 'pink' }"
          @click="aaa(scope.row)"
        >
          {{ scope.row }}
        </h5>
      </template>
    </child>
    <br />
    <hr />
    <br />
    <child>
      <!-- 作用域插槽 -->
      <template #s3="scope">
        <h5
          :style="{ color: scope.row === '永远的神' ? 'red' : 'pink' }"
          @click="aaa(scope.row)"
        >
          {{ scope.row }}
        </h5>
      </template>
    </child>
  </div>
</template>
<script>
import child from '@/slotStudy/child'
export default {
  components: {
    child
  },
  data () {
    return {
      name: '永远的神'
    }
  },
  methods: {
    aaa (row) {
      console.log(row)
    }
  }
}
</script>
